<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="1100px" append-to-body custom-class="import-dialog">
      <div class="item-container">
        <el-row class="item-container__content">
          <el-col :span="10">
            <el-descriptions :column="1">
              <el-descriptions-item label="订单状态">
                <dict-tag
                  :options="dict.type.work_order_state"
                  :value="orderInfo.workOrderState"
                />
              </el-descriptions-item>
              <el-descriptions-item label="已接单，请上传维修前照片" v-if="Number(orderInfo.workOrderState) === 3"
              ></el-descriptions-item>
              <el-descriptions-item label="维修中，请尽快处理" v-if="Number(orderInfo.workOrderState) === 4"
              ></el-descriptions-item>
              <el-descriptions-item label="已评价，感谢您的服务"
                                    v-if="Number(orderInfo.workOrderState) === 6 && orderInfo.estimationFlag === '1'"
              ></el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="14">
            <el-descriptions :column="1">
              <el-descriptions-item label="项目">
                预约看房
              </el-descriptions-item>
              <el-descriptions-item label="房源">{{ orderInfo.premisesAddress }}</el-descriptions-item>
              <el-descriptions-item label="申请人">{{ orderInfo.contactsName }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{ orderInfo.contactsPhone }}</el-descriptions-item>
              <el-descriptions-item label="预约时间">{{ orderInfo.appointmentTime?orderInfo.appointmentTime:'--' }}
              </el-descriptions-item>
              <el-descriptions-item label="期望入住时间">
                <dict-tag :options="dict.type.expect_check_in_type" :value="orderInfo.expectCheckInType"></dict-tag>
              </el-descriptions-item>
              <el-descriptions-item label="指定带看员">{{
                  orderInfo.expectPersonName ? orderInfo.expectPersonName : '--'
                }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <!--    是否是工单承接人 ：是：true   -->
        <div class="item-container__footer" v-if="isOrderTaker === true">
          <!--    1：待派单      -->
          <!--          <div v-if="Number(orderInfo.workOrderState) === 1">-->
          <!--            <el-button @click="editComeTime">修改看房时间</el-button>-->

          <!--          </div>-->
          <!--    2：待接单      -->
          <div v-if="Number(orderInfo.workOrderState) === 2">
            <el-button @click="editComeTime">修改看房时间</el-button>
            <el-button type="primary" @click="handleReceiveOrder">接单</el-button>
            <el-button type="danger" @click="handleRefuseOrder">拒接申请</el-button>
          </div>
          <!--    3：已接单      -->
          <div v-if="Number(orderInfo.workOrderState) === 3">
            <el-button type="primary" @click="handleEdit" v-if="!isEdit">编辑</el-button>
            <el-button type="primary" @click="handleSave" v-if="isEdit">保存</el-button>
            <el-button type="danger" @click="handleRefuseOrder">拒接申请</el-button>
          </div>
          <!--    4：维修中      -->
          <div v-if="Number(orderInfo.workOrderState) === 4">
            <el-button type="primary" @click="handleEdit" v-if="!isEdit">编辑</el-button>
            <el-button type="primary" @click="handleSave" v-if="isEdit">保存</el-button>
            <el-button type="primary" @click="handleSubmit">提交缴费单</el-button>
            <el-button type="danger" @click="handleRefuseOrder">拒接申请</el-button>
          </div>
          <!--    5：待缴费      -->
          <div v-if="Number(orderInfo.workOrderState) === 5">
            <el-button type="warning" @click="handleGenerateCode">生成付款码</el-button>
          </div>
          <!--    8：待审核      -->
          <div v-if="Number(orderInfo.workOrderState) === 8">
            <el-button type="primary" @click="handleCancelRefuse">撤销拒接申请</el-button>
          </div>
        </div>
        <!--    是否是工单承接人 ：否：false   -->
        <div class="item-container__footer" v-if="isOrderTaker === false">
          <!--    1：待派单      -->
          <div v-if="Number(orderInfo.workOrderState) === 1 && isOrderTaker === false">
            <el-button @click="editComeTime">修改看房时间</el-button>
            <el-button type="primary" @click="handleDispatch" v-if="isDispatchBtnShow">派单</el-button>
            <el-button type="danger" @click="handleReject">驳回工单</el-button>
          </div>
          <!--    2：待接单      -->
          <div v-if="Number(orderInfo.workOrderState) === 2">
            <el-button @click="editComeTime">修改看房时间</el-button>
            <el-button type="primary" @click="handleDispatch" v-if="isDispatchBtnShow">改派</el-button>
            <!--            <el-button type="danger" @click="handleVoided">工单作废</el-button>-->
            <el-button type="danger" @click="handleReject">驳回工单</el-button>
          </div>

          <!--    3：已接单      -->
          <div v-if="Number(orderInfo.workOrderState) === 3">
            <!--            <el-button @click="editComeTime">修改看房时间</el-button>-->
            <!--            <el-button type="primary" @click="handleEdit" v-if="!isEdit">编辑</el-button>-->
            <!--            <el-button type="primary" @click="handleSave" v-if="isEdit">保存</el-button>-->
            <!--            <el-button type="primary" @click="handleDispatch">改派</el-button>-->
            <!--            <el-button type="danger" @click="handleVoided">工单作废</el-button>-->
            <el-button type="danger" @click="handleReject">驳回工单</el-button>
          </div>
          <!--    4：维修中      -->
          <!--          <div v-if="Number(orderInfo.workOrderState) === 4">-->
          <!--            <el-button type="primary" @click="handleEdit" v-if="!isEdit">编辑</el-button>-->
          <!--            <el-button type="primary" @click="handleSave" v-if="isEdit">保存</el-button>-->
          <!--            <el-button type="primary" @click="handleSubmit">提交缴费单</el-button>-->
          <!--            <el-button type="primary" @click="handleDispatch">改派</el-button>-->
          <!--&lt;!&ndash;            <el-button type="danger" @click="handleVoided">工单作废</el-button>&ndash;&gt;-->
          <!--            <el-button type="danger" @click="handleReject">驳回工单</el-button>-->
          <!--          </div>-->
          <!--          &lt;!&ndash;    5：待缴费      &ndash;&gt;-->
          <!--          <div v-if="Number(orderInfo.workOrderState) === 5">-->
          <!--            <el-button type="warning" @click="handleGenerateCode">生成付款码</el-button>-->
          <!--            <el-button type="warning" @click="handleUploadPayment">上传支付凭证</el-button>-->
          <!--          </div>-->
          <!--    8：待审核      -->
          <div v-if="Number(orderInfo.workOrderState) === 8">
            <el-button @click="editComeTime">修改看房时间</el-button>
            <el-button type="primary" @click="HandleAccessDenial">审核</el-button>
            <el-button type="primary" @click="handleDispatch" v-if="isDispatchBtnShow">改派</el-button>
            <el-button type="danger" @click="handleReject">驳回工单</el-button>
          </div>
        </div>
      </div>
      <!--     基础信息   -->
      <div class="item-container">
        <div class="item-container__title">
          基础信息
        </div>
        <div class="item-container__content">
          <el-descriptions :column="5" direction="vertical">
            <el-descriptions-item label="带看员"><span>{{
                orderInfo.personName ? orderInfo.personName : '待派单'
              }}</span></el-descriptions-item>
            <el-descriptions-item label="预计看房时间">{{
                orderInfo.estimateTime ? orderInfo.estimateTime : '未填写'
              }}
            </el-descriptions-item>
            <el-descriptions-item label="订单来源">
              <dict-tag :options="dict.type.work_order_source" :value="orderInfo.workOrderSource"/>
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">{{ orderInfo.createTime|formatDate('YYYY-MM-DD HH:mm') }}
            </el-descriptions-item>
            <el-descriptions-item label="接单时间">{{
                orderInfo.receiveOrderTime ? (orderInfo.receiveOrderTime) : '--'
              }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!--     看房信息：已完成   -->
      <div v-if="showInfoByState('viewInfo')" class="item-container">
        <div class="item-container__title">
          看房信息
        </div>
        <div class="item-container__content">
          <div class="item-container__content__view-house">
            <div class="item-container__content__view-house__left">
              <div class="item-container__content__view-house__left__label">
                看房图片：
              </div>
              <div class="item-container__content__view-house__left__img">
                <el-image style="width: 100px; height: 100px; margin-right: 10px;border: 1px solid #eee;"
                          :src="item"
                          v-for="(item,index) in pictureStrToArr(orderInfo.attendantPicture)" :key="index"
                          :preview-src-list="pictureStrToArr(orderInfo.attendantPicture)"
                ></el-image>
              </div>
            </div>
            <div class="item-container__content__view-house__right">
              <div class="item-container__content__view-house__right__item">
                <div class="item-container__content__view-house__right__item__label">
                  备注：
                </div>
                <div class="item-container__content__view-house__right__item__content">
                  {{ orderInfo.workOrderExplain ? orderInfo.workOrderExplain : '--' }}
                </div>
              </div>
              <div class="item-container__content__view-house__right__item">
                <div class="item-container__content__view-house__right__item__label">
                  提交时间：
                </div>
                <div class="item-container__content__view-house__right__item__content">
                  {{ orderInfo.workCompletedTime ? orderInfo.workCompletedTime : '--' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      &lt;!&ndash;     维修信息：待接单、已接单、维修中、待缴费、已完成   &ndash;&gt;-->
      <!--      <div v-if="showInfoByState('repairInfo')" class="item-container">-->
      <!--        <div class="item-container__title">-->
      <!--          维修信息-->
      <!--        </div>-->
      <!--        <div class="item-container__content">-->
      <!--          <el-form :model="repairForm" ref="repairForm" :rules="repairFormRules" label-width="80px">-->
      <!--            <el-row>-->
      <!--              <el-col :span="12">-->
      <!--                &lt;!&ndash;    维修前照片    &ndash;&gt;-->
      <!--                <el-form-item label="维修前:" key="workOrderBeforePictureList" prop="workOrderBeforePictureList">-->
      <!--                  <div v-if="[2,3,4,5,6].includes(Number(orderInfo.workOrderState))">-->
      <!--                    <ImageUpload v-model="repairForm.workOrderBeforePictureList" :limit="6"-->
      <!--                                 v-if="isEdit"-->

      <!--                    >-->
      <!--                      <template slot="tip">-->
      <!--                        <div style="color: #909399;font-size: 12px;">-->
      <!--                          * 仅支持图片格式（例如：jpg、png、jpeg等），最多上传6张每张最大5M；-->
      <!--                        </div>-->
      <!--                      </template>-->
      <!--                    </ImageUpload>-->
      <!--                    <div v-else>-->
      <!--                      <el-image style="width: 100px; height: 100px; margin-right: 10px;border: 1px solid #eee;"-->
      <!--                                :src="item"-->
      <!--                                v-for="(item,index) in repairForm.workOrderBeforePictureList" :key="index"-->
      <!--                                :preview-src-list="repairForm.workOrderBeforePictureList"-->
      <!--                      ></el-image>-->
      <!--                      &lt;!&ndash;没有图片时&ndash;&gt;-->
      <!--                      <div v-if="repairForm.workOrderBeforePictureList.length === 0"-->
      <!--                           style="width: 100px; height: 100px; margin-right: 10px;border: 1px solid #eee;"-->
      <!--                      >-->
      <!--                      </div>-->
      <!--                    </div>-->
      <!--                  </div>-->
      <!--                </el-form-item>-->
      <!--              </el-col>-->
      <!--              <el-col :span="12">-->
      <!--                &lt;!&ndash;    维修后照片    &ndash;&gt;-->
      <!--                <el-form-item label="维修后:" key="workOrderAfterPictureList" prop="workOrderAfterPictureList">-->
      <!--                  <div v-if="[2,3,4,5,6].includes(Number(orderInfo.workOrderState))">-->
      <!--                    <ImageUpload v-model="repairForm.workOrderAfterPictureList" :limit="6"-->
      <!--                                 v-if="isEdit"-->

      <!--                    >-->
      <!--                      <template slot="tip">-->
      <!--                        <div style="color: #909399;font-size: 12px;">-->
      <!--                          * 仅支持图片格式（例如：jpg、png、jpeg等），最多上传6张每张最大5M；-->
      <!--                        </div>-->
      <!--                      </template>-->
      <!--                    </ImageUpload>-->

      <!--                    <div v-else>-->
      <!--                      <el-image style="width: 100px; height: 100px; margin-right: 10px;border: 1px solid #eee;"-->
      <!--                                :src="item"-->
      <!--                                v-for="(item,index) in repairForm.workOrderAfterPictureList" :key="index"-->
      <!--                                :preview-src-list="repairForm.workOrderAfterPictureList"-->
      <!--                      ></el-image>-->
      <!--                      &lt;!&ndash;没有图片时&ndash;&gt;-->
      <!--                      <div v-if="repairForm.workOrderAfterPictureList.length === 0"-->
      <!--                           style="width: 100px; height: 100px; margin-right: 10px;border: 1px solid #eee;"-->
      <!--                      >-->
      <!--                      </div>-->
      <!--                    </div>-->
      <!--                  </div>-->
      <!--                </el-form-item>-->
      <!--              </el-col>-->
      <!--            </el-row>-->
      <!--            &lt;!&ndash;      状态：维修中显示      &ndash;&gt;-->
      <!--            <el-form-item label="说明:" prop="workOrderExplain" key="workOrderExplain">-->
      <!--              <el-input v-if="isEdit && [3,4].includes(Number(orderInfo.workOrderState))" type="textarea"-->
      <!--                        v-model="repairForm.workOrderExplain" placeholder="请输入维修说明" rows="2"-->
      <!--              />-->
      <!--              <div v-else>{{ orderInfo.workOrderExplain }}</div>-->
      <!--            </el-form-item>-->
      <!--          </el-form>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      &lt;!&ndash;     费用信息：待接单、已接单、维修中、待缴费、已完成、已评价   &ndash;&gt;-->
      <!--      <div v-if="showInfoByState('costInfo')" class="item-container">-->
      <!--        <div class="item-container__title">-->
      <!--          费用信息-->
      <!--        </div>-->
      <!--        <div class="item-container__content">-->
      <!--          <div v-if="[2,3,4].includes(Number(orderInfo.workOrderState))">-->
      <!--            <div style="margin-bottom: 10px"><span style="color: red;font-size: 14px;font-weight: bold;">*</span>添加费用-->
      <!--            </div>-->
      <!--            <el-button type="primary" @click="addCost" size="mini" v-if="isEdit" style="margin-bottom: 10px">新增费用项-->
      <!--            </el-button>-->
      <!--          </div>-->
      <!--          <div class="item-container__content__table">-->
      <!--            <el-table :data="repairForm.workOrderChargeItemList" :border="true" style="width: 100%">-->
      <!--              &lt;!&ndash;     维修项目、材料费（元）、劳务费、数量、操作       &ndash;&gt;-->
      <!--              <el-table-column label="维修项目" prop="itemName" align="center">-->
      <!--                <template slot-scope="scope">-->
      <!--                  <el-select v-model="scope.row.itemId" placeholder="请选择维修项目" :disabled="!isEdit"-->
      <!--                             @change="handleItemChange($event,scope.$index)"-->
      <!--                  >-->
      <!--                    <el-option v-for="item in projectList" :key="item.value" :label="item.label"-->
      <!--                               :value="item.value"-->
      <!--                    >-->
      <!--                    </el-option>-->
      <!--                  </el-select>-->
      <!--                </template>-->
      <!--              </el-table-column>-->
      <!--              <el-table-column label="材料费（元）" prop="materialCost" align="center">-->
      <!--                <template slot-scope="scope">-->
      <!--                  <div v-if="scope.row.materialCostType&&scope.row.materialCostType==='2' && isEdit">-->
      <!--                    <el-input v-model="scope.row.materialCost"/>-->
      <!--                  </div>-->
      <!--                  <div v-else>-->
      <!--                    {{ scope.row.materialCost }}-->
      <!--                  </div>-->
      <!--                </template>-->
      <!--              </el-table-column>-->
      <!--              <el-table-column label="劳务费" prop="laborCost" align="center">-->
      <!--                <template slot-scope="scope">-->
      <!--                  <div v-if="scope.row.laborCostType&&scope.row.laborCostType==='2' && isEdit">-->
      <!--                    <el-input v-model="scope.row.laborCost"/>-->
      <!--                  </div>-->
      <!--                  <div v-else>-->
      <!--                    {{ scope.row.laborCost }}-->
      <!--                  </div>-->
      <!--                </template>-->
      <!--              </el-table-column>-->
      <!--              <el-table-column label="数量" prop="chargeQuantity" align="center">-->
      <!--                <template slot-scope="scope">-->
      <!--                  <div v-if="!scope.row.workOrderChargeItemId&&isEdit">-->
      <!--                    <el-input v-model="scope.row.chargeQuantity"/>-->
      <!--                  </div>-->
      <!--                  <div v-else>-->
      <!--                    {{ scope.row.chargeQuantity }}-->
      <!--                  </div>-->
      <!--                </template>-->
      <!--              </el-table-column>-->
      <!--              <el-table-column label="操作" width="100" align="center" v-if="isEdit">-->
      <!--                <template slot-scope="scope">-->
      <!--                  <el-button type="text" @click="deleteCost(scope.$index)">删除</el-button>-->
      <!--                </template>-->
      <!--              </el-table-column>-->
      <!--            </el-table>-->
      <!--            <div class="item-container__content__table__fee">-->
      <!--              <div class="item-container__content__table__payment">-->
      <!--                <div class="item-container__content__table__payment__payTime"-->
      <!--                     v-if="Number(orderInfo.workOrderState) === 6"-->
      <!--                >-->
      <!--                  支付时间：{{ orderInfo.paymentTime|formatDate('YYYY-MM-DD HH:mm') }}-->
      <!--                </div>-->
      <!--                <div class="item-container__content__table__payment__payMethod"-->
      <!--                     v-if="Number(orderInfo.workOrderState) === 6"-->
      <!--                >-->
      <!--                  支付方式：{{ paymentTypeMap[orderInfo.paymentType] }}-->
      <!--                </div>-->
      <!--              </div>-->

      <!--              <div class="item-container__content__table__total"-->
      <!--                   v-if="[5,6].includes(Number(orderInfo.workOrderState))"-->
      <!--              >-->
      <!--                <div class="item-container__content__table__total__cost">合计：{{ repairTotalCost }}元</div>-->
      <!--                <div class="item-container__content__table__total__createTime">-->
      <!--                  提交时间：{{ orderInfo.workCompletedTime|formatDate('YYYY-MM-DD HH:mm') }}-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </div>-->

      <!--          </div>-->

      <!--        </div>-->
      <!--      </div>-->
      <!--     评价信息   -->
      <div v-if="orderInfo.estimationFlag === '1'" class="item-container">
        <div class="item-container__title">
          满意度评价
        </div>
        <div class="item-container__content">
          <div class="item-container__content__rate-container">
            <div class="item-container__content__rate-container__rate">
              <div class="item-container__content__rate-container__rate__item">
                <div class="item-container__content__rate-container__rate__item__title">
                  总体评价:
                </div>
                <el-rate v-model="workOrderEvaluation.totalityScore" disabled></el-rate>
              </div>
              <div class="item-container__content__rate-container__rate__item">
                <div class="item-container__content__rate-container__rate__item__title">
                  相应速度:
                </div>
                <el-rate v-model="workOrderEvaluation.respondScore" disabled></el-rate>
              </div>
              <div class="item-container__content__rate-container__rate__item">
                <div class="item-container__content__rate-container__rate__item__title">
                  服务态度:
                </div>
                <el-rate v-model="workOrderEvaluation.serveScore" disabled></el-rate>
              </div>
              <div class="item-container__content__rate-container__rate__item">
                <div class="item-container__content__rate-container__rate__item__title">
                  处理结果:
                </div>
                <el-rate v-model="workOrderEvaluation.resultScore" disabled></el-rate>
              </div>
            </div>
            <div class="item-container__content__rate-container__info">
              <div class="item-container__content__rate-container__info__item">
                <div class="item-container__content__rate-container__info__item__title">
                  评价内容:
                </div>
                <div class="item-container__content__rate-container__info__item__content">
                  {{ workOrderEvaluation.evaluateContent }}
                </div>
              </div>
              <div class="item-container__content__rate-container__info__item">
                <div class="item-container__content__rate-container__info__item__title">
                  评价时间:
                </div>
                <div class="item-container__content__rate-container__info__item__content">
                  {{ workOrderEvaluation.createTime }}
                </div>
              </div>
              <div class="item-container__content__rate-container__info__item">
                <div class="item-container__content__rate-container__info__item__image">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="item"
                    :preview-src-list="pictureStrToArr(workOrderEvaluation.evaluateImg)"
                    v-for="(item, index) in pictureStrToArr(workOrderEvaluation.evaluateImg)"
                    :key="index"
                    class="item-container__content__rate-container__info__item__image__item"
                  >
                  </el-image>
                </div>

              </div>

            </div>
          </div>

        </div>
      </div>
      <!--     跟进记录   -->
      <div class="item-container">
        <div class="item-container__title">
          跟进记录
        </div>
        <div class="item-container__content">
          <div class="item-container__content__timeline">
            <el-timeline :reverse="true">
              <el-timeline-item
                placement="bottom"
                type="primary"
                v-for="(item, index) in recordList"
                :key="index"
                :timestamp="item.createTime"
              >
                <div class="item-container__content__timeline__item__content">
                  <span>{{ item.recordContent }}</span>
                  <div v-if="item.recordImg" style="margin-left: 10px">
                    <el-image style="width: 50px; height: 50px; margin-right: 10px;border: 1px solid #eee;" :src="image"
                              v-for="(image,index) in pictureStrToArr(item.recordImg)" :key="index"
                              :preview-src-list="pictureStrToArr(item.recordImg)"
                    ></el-image>
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
            <!--     为空时，显示暂无记录       -->
            <div v-if="!recordList || recordList.length === 0"
                 class="item-container__content__timeline__empty"
            >
              暂无记录
            </div>
          </div>
          <div class="item-container__content__record">
            <div class="item-container__content__record__input">
              <el-input
                type="textarea"
                placeholder="添加跟进记录，按enter 键提交"
                v-model="recordForm.recordContent"
                maxlength="200"
                show-word-limit
                @keyup.enter.native="addRecord"
              />
            </div>
            <div class="item-container__content__record__button">
              <el-button type="primary" size="mini" @click="addRecord">发送</el-button>
            </div>

          </div>

        </div>
      </div>
    </el-dialog>
    <!-- 修改看房时间弹窗 -->
    <el-dialog title="修改看房时间" :visible.sync="editComeTimeVisible" width="400px" append-to-body
               custom-class="import-dialog"
    >
      <el-form :model="editComeTimeForm" ref="editComeTimeForm" :rules="editComeTimeFormRules">
        <el-form-item prop="estimateTime" key="estimateTime">
          <el-date-picker
            v-model="editComeTimeForm.estimateTime"
            type="datetime"
            placeholder="请选择日期"
            style="width: 100%"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:00"
            :default-time="estimateTimeDefaultTime"
            :picker-options="{
              disabledDate: (time) => {
                const now = new Date()
                return compareDate(time, now, '<')
              }
            }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="saveComeTime">确定</el-button>
        <el-button @click="editComeTimeVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--  派单弹窗  -->
    <Dispatch v-model="dispatchVisible" :data="orderInfo" @success="handleRefresh"/>
    <!--  驳回工单弹窗  -->
    <el-dialog title="驳回工单" :visible.sync="rejectVisible" width="600px" append-to-body custom-class="import-dialog">
      <el-form :model="rejectForm" ref="rejectForm" :rules="rejectFormRules">
        <el-form-item label="驳回原因" prop="recordContent" key="recordContent">
          <el-input type="textarea" v-model="rejectForm.recordContent" placeholder="请输入驳回原因" rows="4"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="rejectVisible = false">取消</el-button>
        <el-button type="primary" @click="rejectSubmit">确定</el-button>
      </div>
    </el-dialog>
    <!--  工单作废弹窗  -->
    <!--    <el-dialog title="工单作废" :visible.sync="voidedVisible" width="600px" append-to-body custom-class="import-dialog">-->
    <!--      <el-form :model="voidedForm" ref="voidedForm" :rules="voidedFormRules">-->
    <!--        <el-form-item label="作废原因" prop="recordContent" key="recordContent">-->
    <!--          <el-input type="textarea" v-model="voidedForm.recordContent" placeholder="请输入作废原因" rows="4"/>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer" style="text-align: center">-->
    <!--        <el-button @click="voidedVisible = false">取消</el-button>-->
    <!--        <el-button type="primary" @click="voidedSubmit">确定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <!--    &lt;!&ndash;  紧急程度弹窗  &ndash;&gt;-->
    <!--    <el-dialog title="紧急程度" :visible.sync="urgencyDegreeVisible" width="400px" append-to-body-->
    <!--               custom-class="import-dialog"-->
    <!--    >-->
    <!--      <el-form :model="urgencyDegreeForm" ref="urgencyDegreeForm">-->
    <!--        <el-form-item prop="urgencyDegree" key="urgencyDegree">-->
    <!--          <el-radio-group v-model="urgencyDegreeForm.urgencyDegree">-->
    <!--            <el-radio label="1">普通</el-radio>-->
    <!--            <el-radio label="2">紧急</el-radio>-->
    <!--            <el-radio label="3">非常紧急</el-radio>-->
    <!--          </el-radio-group>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer" style="text-align: center">-->
    <!--        <el-button @click="urgencyDegreeVisible = false">取消</el-button>-->
    <!--        <el-button type="primary" @click="urgencyDegreeSubmit">确定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <!--  工单二维码弹窗  -->
    <!--    <ViewQrcode :data="orderInfo" :total="repairTotalCost" title="付款码" v-model="viewQrcodeDialogVisible"-->
    <!--                @close="getDetail"-->
    <!--    />-->
    <!--  上传支付凭证弹窗  -->
    <!--    <UploadPayment v-model="uploadPaymentVisible" :data="data" :total="repairTotalCost" @success="handleRefresh"/>-->
    <!--  审核弹窗  -->
    <el-dialog title="审核" :visible.sync="auditVisible" width="400px" append-to-body
               custom-class="import-dialog"
    >
      <el-form :model="auditForm" ref="auditForm">
        <el-form-item label="拒接审核" prop="auditDenial" key="auditDenial">
          <el-radio-group v-model="auditForm.auditDenial">
            <el-radio label="1">同意</el-radio>
            <el-radio label="0">不同意</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="recordContent" key="recordContent">
          <el-input type="textarea" v-model="auditForm.recordContent" placeholder="" rows="4"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="auditVisible = false">取消</el-button>
        <el-button type="primary" @click="handleauditSubmit">确定</el-button>
      </div>
    </el-dialog>
    <!--  接单弹窗  -->
    <!--    <AcceptOrder v-model="acceptOrderVisible" :data="orderInfo" @success="handleRefresh"/>-->
    <!--  拒接工单弹窗  -->
    <!--    <RefuseOrder v-model="refuseOrderVisible" :data="orderInfo" @success="handleRefresh"/>-->
    <!--  撤销拒接申请弹窗  -->
    <!--    <CancelRefuse v-model="cancelRefuseVisible" :data="orderInfo" @success="handleRefresh"/>-->
  </div>
</template>

<script>
import { debounce } from '@/utils'
import { compareDate, compareDateTime } from '@/utils/common/moment'
import Dispatch from './dispatch'
// import UploadPayment from './upload-payment'
// import ViewQrcode from './view-qrcode.vue'
import {
  accessDenial,
  addWorkOrderRecord, auditDenial,
  editUrgencyDegree,
  editVisitTime, editWorkOrdeBeingRepaired,
  getWorkOrderDetail, listWorkOrderRecord,
  rejectWorkOrder, submitPaymentSlip
} from '@/api/houseManagement/workOrder'
import { getMaintenanceItemInfo } from '@/api/houseManagement/maintenanceItem'
import { getSetSwitch } from '@/api/audit/audit'
// import RefuseOrder from '@/views/houseManagement/maintenanceWorkOrder/components/refuse-order.vue'
// import CancelRefuse from '@/views/houseManagement/maintenanceWorkOrder/components/cancel-refuse.vue'
// import AcceptOrder from '@/views/houseManagement/maintenanceWorkOrder/components/accept-order.vue'

export default {
  dicts: ['work_order_state', 'dispose_time_limit', 'work_order_source', 'expect_check_in_type'],
  name: 'Detail',
  components: {
    // AcceptOrder,
    // CancelRefuse,
    // RefuseOrder,
    Dispatch
    // UploadPayment,
    // ViewQrcode
  },
  props: {
    title: {
      default: '工单详情'
    },
    value: {
      default: false
    },
    data: {
      default: undefined
    },
    // 是否是订单承接人
    isOrderTaker: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 工单详情
      orderInfo: {},
      // 表单
      form: {},
      rules: {},
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      // 是否编辑
      isEdit: false,
      // 跟进记录表单
      recordForm: {
        recordContent: '',
        workOrderId: ''
      },
      recordContent: '',
      // 跟进记录
      recordList: [],
      // 修改看房时间弹窗
      editComeTimeVisible: false,
      // 默认上门时间
      estimateTimeDefaultTime: '',
      // 修改看房时间表单
      editComeTimeForm: {
        workOrderId: '',
        estimateTime: ''
      },
      // 修改看房时间表单规则
      editComeTimeFormRules: {
        estimateTime: [{ required: true, message: '请选择日期', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (value) {
                const now = new Date()
                if (compareDateTime(value, now, '<')) {
                  callback('预计上门时间不能小于当前时间')
                }
              }
              callback()
            },
            trigger: 'change'
          }]
      },
      // 派单弹窗
      dispatchVisible: false,
      // 驳回工单弹窗
      rejectVisible: false,
      // 驳回表单
      rejectForm: {
        workOrderId: '',
        recordContent: ''
      },
      // 驳回表单规则
      rejectFormRules: {
        recordContent: [{ required: true, message: '请输入驳回原因', trigger: 'change' }]
      },
      // 工单作废弹窗
      voidedVisible: false,
      // 工单作废表单
      voidedForm: {
        workOrderId: '',
        recordContent: ''
      },
      // 工单作废表单规则
      voidedFormRules: {
        recordContent: [{ required: true, message: '请输入作废原因', trigger: 'change' }]
      },
      //紧急程度映射
      urgencyDegreeMap: {
        '1': '普通',
        '2': '紧急',
        '3': '非常紧急'
      },
      //紧急程度弹窗
      urgencyDegreeVisible: false,
      // 紧急程度表单
      urgencyDegreeForm: {
        workOrderId: '',
        urgencyDegree: '1'
      },
      // 维修项目列表
      projectList: [],
      // 维修信息
      repairForm: {
        workOrderId: '',//工单编号
        workOrderBeforePictureList: [],//维修前照片集合
        workOrderAfterPictureList: [],//维修后照片集合
        workOrderChargeItemList: [],//维修费用项目集合
        workOrderExplain: ''
      },
      repairFormRules: {
        workOrderBeforePictureList: [{ required: true, message: '请上传维修前照片', trigger: 'change' }],
        workOrderAfterPictureList: [{ required: true, message: '请上传维修后照片', trigger: 'change' }]
      },
      //工单来源
      workOrderSourceMap: {
        '1': '报修工单管理',
        '2': '小程序'
      },
      // 支付方式
      paymentTypeMap: {
        '1': '扫码支付',
        '2': '微信支付',
        '3': '线下支付'
      },
      // 生成付款码二维码
      viewQrcodeDialogVisible: false,
      // 上传支付凭证弹窗
      uploadPaymentVisible: false,
      // 审核弹窗
      auditVisible: false,
      // 审核表单
      auditForm: {
        workOrderId: '',
        auditDenial: '1',
        recordContent: ''
      },
      auditFormRules: {},
      //评价数据
      workOrderEvaluation: {
        totalityScore: 4,//总体评价分
        respondScore: null,//响应速度分
        serveScore: null,//服务态度分
        resultScore: null,//处理结果分
        evaluateContent: '',//评价内容
        evaluateImg: '',//评价图片
        createTime: ''//评价时间
      },

      //接单弹窗
      acceptOrderVisible: false,
      //拒接工单弹窗
      refuseOrderVisible: false,
      //撤销拒接申请弹窗
      cancelRefuseVisible: false,
      //派单/改派按钮显示
      isDispatchBtnShow: true,
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    //故障图片列表
    faultPictureList() {
      return (value) => {
        return value ? value.split(',') : []
      }
    },
    //维修项目名
    itemNames() {
      return (value) => {
        let list = value ? value.map(item => item.itemName) : []
        return list.join(' | ')
      }
    },
    // 维修总计费用
    repairTotalCost() {
      let total = 0
      this.repairForm.workOrderChargeItemList.forEach(item => {
        total += item.materialCost * item.chargeQuantity + item.laborCost
      })
      return total.toFixed(2)
    },
    //图片处理
    pictureStrToArr() {
      return (value) => {
        if (value) {
          return value?Array.isArray(value) ? value : value.split(','): []
        } else {
          return []
        }

      }
    },
    // 工单状态判断展示信息
    showInfoByState() {
      return (type) => {
        switch (type) {
          case 'viewInfo':
            return [6].includes(Number(this.orderInfo.workOrderState))
            break
          default:
            return false
        }
      }
    }

  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    compareDate,
    init() {
      this.reset()
      this.getDetail()
      this.getProjectList()
      // this.getSetSwitch()
    },
    reset() {
      this.form = {}
      this.resetForm('form')
      this.isEdit = false

    },
    getDetail() {
      if (!this.data.workOrderId) return
      getWorkOrderDetail(this.data.workOrderId).then(res => {
        this.orderInfo = res.data
        // 跟进记录列表
        this.getRecordList()
        //维修前后图片处理
        this.repairForm.workOrderBeforePictureList = this.faultPictureList(this.orderInfo.workOrderBeforePicture)
        this.repairForm.workOrderAfterPictureList = this.faultPictureList(this.orderInfo.workOrderAfterPicture)
        // 维修说明
        this.repairForm.workOrderExplain = this.orderInfo.workOrderExplain
        // 维修项目列表
        this.repairForm.workOrderId = this.orderInfo.workOrderId
        this.repairForm.workOrderChargeItemList = [...this.orderInfo.workOrderChargeItemList]
        //评价数据处理
        for (let key in this.workOrderEvaluation) {
          if (this.orderInfo.workOrderEvaluation && this.orderInfo.workOrderEvaluation[key]) {
            this.workOrderEvaluation[key] = this.orderInfo.workOrderEvaluation[key]
          }
        }
      })
    },
    // 获取跟进记录列表
    getRecordList() {
      listWorkOrderRecord({ workOrderId: this.orderInfo.workOrderId }).then(res => {
        this.recordList = res.data
      }).catch(err => {
        console.log(err)
        this.recordList = []
      })
    },
    // 获取维修项目列表
    getProjectList() {
      getMaintenanceItemInfo().then(response => {
        this.projectList = response.data.map(item => {
          return {
            ...item,
            label: item.maintenanceItemName,
            value: item.maintenanceItemId
          }
        })
      })
    },
    // 获取审核信息
    getSetSwitch() {
      getSetSwitch().then(res => {
        this.isDispatchBtnShow = res.data.woLookHouseCreate === '2'? true : false
      })
    },
    // 操作开启编辑
    handleEdit() {
      console.log('handleEdit', '开启编辑')
      this.isEdit = true
    },
    // 操作保存
    handleSave() {
      console.log('handleSave', '保存')
      // 判断维修前后图片是否上传
      // if (this.repairForm.workOrderBeforePictureList.length === 0 || this.repairForm.workOrderAfterPictureList.length === 0) {
      //   this.$message.error('请上传维修前后图片')
      //   return
      // }
      //判断费用项目是否选择以及是否完整填写
      let flag = true
      this.repairForm.workOrderChargeItemList.forEach(item => {
        if (item.itemId === '' || item.itemName === '' || item.materialCost === null || item.laborCost === null || item.chargeQuantity === null) {
          flag = false
        }
      })
      if (!flag) {
        this.$message.error('请填写完整费用信息')
        return
      }
      console.log('handleSave', this.repairForm)
      // 保存
      editWorkOrdeBeingRepaired(this.repairForm).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '操作成功')
          this.handleRefresh()
          this.isEdit = false
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //提交缴费单
    handleSubmit() {
      this.$confirm('请确认缴费单，提交后将无法修改，确定提交吗？', '确认提交缴费单？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('handleSubmit')
        submitPaymentSlip(this.data.workOrderId).then(res => {
          this.$message.success(res.msg || '操作成功')
          this.handleRefresh()
        })
      })
    },

    // 新增费用
    addCost() {
      this.repairForm.workOrderChargeItemList.push({
        itemId: '',
        itemName: '',
        materialCost: null,
        laborCost: null,
        chargeQuantity: null
      })
    },
    // 删除费用项
    deleteCost(index) {
      this.repairForm.workOrderChargeItemList.splice(index, 1)
    },
    // 选择维修项目
    handleItemChange(event, rowIndex) {
      let item = this.projectList.find(item => item.value === event)
      this.repairForm.workOrderChargeItemList[rowIndex].itemId = item.maintenanceItemId
      this.repairForm.workOrderChargeItemList[rowIndex].itemName = item.maintenanceItemName
      this.repairForm.workOrderChargeItemList[rowIndex].materialCost = item.materialCost
      this.repairForm.workOrderChargeItemList[rowIndex]['materialCostType'] = item.materialCostType
      this.repairForm.workOrderChargeItemList[rowIndex].laborCost = item.laborCost
      this.repairForm.workOrderChargeItemList[rowIndex]['laborCostType'] = item.laborCostType
      this.repairForm.workOrderChargeItemList[rowIndex].chargeQuantity = item.chargeQuantity
      this.repairForm.workOrderChargeItemList[rowIndex]['workOrderChargeItemId'] = null

    },
    // 添加跟进记录
    addRecord: debounce(function() {
      console.log('addRecord', this.recordForm)
      if (this.recordForm.recordContent.trim() === '') {
        return
      }
      this.recordForm.workOrderId = this.data.workOrderId
      addWorkOrderRecord(this.recordForm).then(res => {
        this.$message.success(res.msg || '操作成功')
        this.recordForm.recordContent = ''
        this.getRecordList()
      })

    }, 500, false),
    // 修改看房时间
    editComeTime() {
      this.editComeTimeVisible = true
      this.editComeTimeForm.workOrderId = this.data.workOrderId
      this.estimateTimeDefaultTime = this.$moment().format('HH:mm:00')
      this.$nextTick(() => {
        this.$refs.editComeTimeForm.resetFields()
      })
    },
    // 处理派单
    handleDispatch() {
      this.dispatchVisible = true
    },
    // 保存修改看房时间
    saveComeTime: debounce(function() {
      this.$refs.editComeTimeForm.validate((valid) => {
        if (valid) {
          console.log('saveComeTime', this.editComeTimeForm)
          editVisitTime(this.editComeTimeForm).then(res => {
            this.$message.success(res.msg || '操作成功')
            this.handleRefresh()
            this.editComeTimeVisible = false
          })

        }
      })
    }, 500, false),
    // 取消
    cancel() {
      this.reset()
      this.visible = false
    },
    // 驳回工单/作废工单
    handleReject() {
      this.rejectForm.workOrderId = this.data.workOrderId
      this.rejectVisible = true
      this.$nextTick(() => {
        this.$refs.rejectForm.resetFields()
      })
    },
    // 驳回提交
    rejectSubmit: debounce(function() {
      this.$refs.rejectForm.validate((valid) => {
        if (valid) {
          rejectWorkOrder(this.rejectForm).then(res => {
            this.$message.success(res.msg || '操作成功')
            this.handleRefresh()
            this.rejectVisible = false
          })
        }
      })
    }, 500, false),
    // // 作废工单
    // handleVoided() {
    //   this.voidedForm.workOrderId = this.data.workOrderId
    //   this.voidedVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.voidedForm.resetFields()
    //   })
    // },
    // // 作废提交
    // voidedSubmit: debounce(function() {
    //   this.$refs.voidedForm.validate((valid) => {
    //     if (valid) {
    //       rejectWorkOrder(this.voidedForm).then(res => {
    //         this.$message.success(res.msg || '操作成功')
    //         this.handleRefresh()
    //         this.voidedVisible = false
    //       })
    //     }
    //   })
    // }, 500, false),
    // 修改紧急程度
    editEmergency() {
      console.log('editEmergency')
      this.urgencyDegreeForm.workOrderId = this.data.workOrderId
      this.urgencyDegreeVisible = true
      this.$nextTick(() => {
        this.$refs.urgencyDegreeForm.resetFields()
        this.urgencyDegreeForm.urgencyDegree = this.orderInfo.urgencyDegree
      })
    },
    // 紧急程度提交
    urgencyDegreeSubmit: debounce(function() {
      this.$refs.urgencyDegreeForm.validate((valid) => {
        if (valid) {
          console.log('urgencyDegreeSubmit')
          editUrgencyDegree(this.urgencyDegreeForm).then(res => {
            this.$message.success(res.msg || '操作成功')
            this.handleRefresh()
            this.urgencyDegreeVisible = false
          })

        }
      })

    }, 500, false),
    //生成付款码
    handleGenerateCode() {
      this.viewQrcodeDialogVisible = true
    },
    // 上传支付凭证
    handleUploadPayment() {
      this.uploadPaymentVisible = true
    },
    // 审核
    HandleAccessDenial() {
      this.auditForm.workOrderId = this.data.workOrderId
      this.auditVisible = true
      this.$nextTick(() => {
        this.$refs.auditForm.resetFields()
      })
    },
    // 审核提交
    handleauditSubmit: debounce(function() {
      console.log('this.auditForm', this.auditForm)
      auditDenial(this.auditForm).then(res => {
        this.$message.success(res.msg || '操作成功')
        this.handleRefresh()
        this.auditVisible = false
      })
    }, 500, false),

    //接单
    handleReceiveOrder() {
      console.log('接单')
      //判断上门时间是否为空
      if (!this.orderInfo.estimateTime) {
        this.$message.error('请选择上门时间')
        this.editComeTime()
        return
      }
      this.acceptOrderVisible = true
    },
    //拒接订单
    handleRefuseOrder() {
      this.refuseOrderVisible = true
    },
    // 撤销拒接
    handleCancelRefuse() {
      console.log('撤销拒接')
      this.cancelRefuseVisible = true
    },
    // 刷新
    handleRefresh() {
      this.getDetail()
      this.isEdit = false
      this.$emit('success')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog";

::v-deep .el-timeline-item__tail {
  border-left: 2px solid #3889F8;
}

::v-deep .el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}

::v-deep .el-upload-list--picture-card {
  width: 100px !important;
  height: 100px !important;

  .el-upload-list__item {
    width: 100px !important;
    height: 100px !important;
  }
}

.item-container {
  .item-container__title {
    font-size: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #797979;
    font-weight: bold;
  }

  .item-container__content {
    margin: 20px 0;

    .item-container__content__timeline {
      height: 300px;
      overflow: auto;
      margin: 30px 0;
      border: 1px solid #797979;
      padding: 10px;

      .item-container__content__timeline__item__content {
        display: flex;
        align-items: center;
      }
    }

    .item-container__content__table {
      .item-container__content__table__fee {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
      }

      .item-container__content__table__payment {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin-bottom: 20px;
        color: #2E9038;
        width: 50%;
      }

      .item-container__content__table__total {
        text-align: right;

        .item-container__content__table__total__cost {
          color: #F6A030;
        }

        .item-container__content__table__total__createTime {
          color: #8E8E8E;
          font-size: 14px;
        }
      }
    }

    .item-container__content__rate-container {
      display: flex;
      margin-top: 20px;
      font-size: 16px;

      .item-container__content__rate-container__rate {
        width: 500px;
        margin-right: 20px;

        .item-container__content__rate-container__rate__item {
          display: flex;
          align-items: baseline;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

        }

        ::v-deep.el-rate {
          heigth: auto;
        }

        ::v-deep.el-rate__icon {
          font-size: 30px;
        }
      }

      .item-container__content__rate-container__info {

        .item-container__content__rate-container__info__item {
          display: flex;
          margin-bottom: 10px;
          align-items: baseline;

          &:last-child {
            margin-bottom: 0;
          }

          .item-container__content__rate-container__info__item-label {
            margin-right: 10px;
            font-weight: bold;
          }

          .item-container__content__rate-container__info__item-value {
            color: #F6A030;
          }

          .item-container__content__rate-container__info__item__image {
            display: flex;
            flew-wrap: wrap;

            .item-container__content__rate-container__info__item__image__item {
              margin-right: 10px;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
    }

    .item-container__content__record {
      display: flex;
      align-items: flex-end;

      .item-container__content__record__input {
        flex: 1;
      }

      .item-container__content__record__button {
        margin-left: 10px;
      }
    }

    .item-container__content__view-house {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
      margin-top: 20px;
      .item-container__content__view-house__left{
        display: flex;
      }
      .item-container__content__view-house__right{
        .item-container__content__view-house__right__item{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
        }
      }
    }
  }

  .item-container__footer {
    text-align: right;
  }
}
</style>
